<template>
  <transition name="ac" appear>
    <div class="account">
      <AccountHeader @switchItem='switchItem'></AccountHeader>
      <AccountBottom :switchNum='switchNum'></AccountBottom>
    </div>
  </transition>
</template>

<script>
import AccountHeader from '../components/account/AccountHeader.vue'
import AccountBottom from '../components/account/AccountBottom.vue'
export default {
  name: 'Account',
  data () {
    return {
      switchNum: 0
    }
  },
  components: {
    AccountHeader,
    AccountBottom
  },
  methods: {
    switchItem (num) {
      this.switchNum = num
    }
  }
}
</script>

<style scoped lang='scss'>
  @import "../assets/css/variable.scss";
  @import '../assets/css/mixin.scss';
  .account{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    @include bg_sub_color();
  }
  .ac-enter{
    transform: translateX(100%);
  }
  .ac-enter-to{
    transform: translateX(0%);
  }
  .ac-enter-active{
    transition: transform 1s;
  }
  .ac-leave{
    transform: translateX(0%);
  }
  .ac-leave-to{
    transform: translateX(100%);
  }
  .ac-leave-active{
    transition: transform 1s;
  }
</style>
